<template>
  <ul class="list">
    <li :style="{flex:item.flex}" v-for="(item, index) in datas" :key="index">
      <span class="label">{{ item.label }}</span>
      <div class="value">{{ item.value }}<i>{{ item.w }}</i></div>
    </li>
  </ul>
</template>

<script setup lang='ts'>
 defineProps({
  datas:{
    type:Array as () => any[],
    default:() => []
  }
})
</script>

<style scoped lang='scss'>
.list{
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  li{
    border: 1px solid #409eff;
    border-radius: 7px;
    padding: 5px;
    .label{
      font-size: 16px;
      font-weight: 550;
    }
    .value{
      font-size: 18px;
      font-weight: 550;
      color: rgb(14, 215, 241);
      i{
        font-size: 12px;
        font-weight: 550;
        color: rgb(238, 234, 8);
      }
    }
  }
}
</style>